<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-07-30 20:02:30
 * @LastEditTime: 2020-02-28 11:25:38
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css" />
    <script type="text/javascript" src="../script/vue.min.js"></script>
    <script type="text/javascript" src="../script/vant.min.js"></script>
    <script type="text/javascript" src="../script/base.js"></script>
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
    <style type="text/css">
        .content {
            display: flex;
            flex-direction: column;
        }

        .mainForm {
            display: flex;
            flex-wrap: wrap;
            background-color: #fff;

        }

        .mainForm .van-field {
            width: 50%;
        }

        .van-field__label {
            width: auto;
        }

        .subForm {
            flex: 1;
            overflow-y: auto;
            padding: 10px;
            display: flex;
            flex-direction: column;
            background-color: #fff;
            border-radius: 8px;
            margin: 6px;
        }

        .subFormItem {
            display: flex;
            width: 100%;
            justify-content: space-between;
            padding-bottom: 10px;
            align-items: center;

        }



        .subFormItem .van-cell {
            background-color: transparent;
            width: 50%;
            background-color: #fff;
        }

        .number {
            margin-left: 6px;
            line-height: 44px;
            /* display: flex; */
        }

        .number .span {
            margin: auto;
            display: inline-block;
            width: 1.5em;
            height: 1.5em;
            line-height: 1.5em;
            background-color: #1989fa;
            border-radius: 50%;
            color: #fff;
            text-align: center;
        }

        .bottomBtn {
            height: 50px;
            width: 100%;
            padding: 10px 10px;
            display: flex;
        }

        .bottomBtn .van-button {
            flex: 1;
            margin: 0 10px;
        }


        .van-radio_group {
            width: 82%;
        }

        .van-radio-group {
            display: flex;
        }

        .van-radio-group .van-radio {
            flex: 1;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="box">
            <van-nav-bar :title="name + '明细'" id="safeTop" left-arrow @click-left="onClickLeft">
                <!-- <template #right>
                      <van-icon name="add" size="20"></van-icon>
                  </template> -->
            </van-nav-bar>
            <div class="content">
                <div class="mainForm">
                    <van-field v-model="formData.SJQty" label="上架数量：" placeholder="请填写上架数量" readonly></van-field>
                    <van-field v-model="formData.JNo" label="上架号：" placeholder="请填写上架号" readonly></van-field>
                    <div class="van-cell van-field" v-if='UserName=="质检员"'>
                        <div class="van-cell__title van-field__label">
                            <span>质检确认</span>
                        </div>
                        <div class="van-radio_group" style="display: flex;">
                            <van-radio-group v-model="formData.Status">
                                <van-radio name="1">是</van-radio>
                                <van-radio name="0">否</van-radio>
                            </van-radio-group>
                        </div>
                    </div>
                </div>
                <div class="subForm" style="text-align: center;">
                    <table align="center">
                        <tr>
                            <th>回路</th>
                            <th>报警内容</th>
                            <th>处理意见</th>
                            <th>操作</th>
                        </tr>

                        <tr v-for="(item, index) in tableData">
                            <td style="width: 10%;">
                                <div class="number">
                                    <span class="span">{{index + 1}}</span>
                                    <span>{{item.Loop}}</span>
                                </div>
                            </td>
                            <td style="width: 25%;">
                                <span>{{item.Alarm}}</span>

                            </td>
                            <td style="width: 25%;text-align: center;margin: auto;">
                                <van-field style="width: 200px;margin: auto;text-align: center;" v-model="item.FRemarks"
                                    label="意见：" readonly placeholder="请填写意见" @click='addSolution(item,index)'>
                                </van-field>

                            </td>
                            <td style="width: 10%;">
                                <van-button type="danger" size="mini" @click="deleteItem(item,index)">删 &nbsp 除
                                </van-button>

                            </td>

                        </tr>
                    </table>

                </div>
                <div class="bottomBtn">
                    <van-button size="small" type="info" @click="confirm">提交</van-button>
                </div>
            </div>
            <audio id="audioPlayer" preload="auto">
                <source src="../image/aigei_com.mp3" type="audio/mpeg">
            </audio>
            <div class="indexBottom">
                汇智云创 技术支持
            </div>
            <van-action-sheet v-model="SolutionShow" :actions="SolutionList" @select="OnSolution">
            </van-action-sheet>
            <van-dialog v-model="passwordshow" title="请输入口令" show-cancel-button @confirm="handlerDialog"
                @cancel="passwordshow = false">
                <van-field v-model="message" rows="1" autosize label="口令：" type="password" placeholder="请输入口令" />
            </van-dialog>
        </div>
    </div>
</body>

<script type="text/javascript">
    var vm;
    apiready = function () {

        api.addEventListener({
            name: 'getCDAlarmLList'
        }, function (ret) {
            APP.getCDAlarmLList()
        })
        api.addEventListener({
            name: 'getYCKBDataLiist'
        }, function (ret) {
            APP.getYCKBDataLiist()
        })
        vm = new Vue({
            el: '#app',
            data: {
                UserName: '',
                SolutionShow: false,
                SolutionIndex: 0,
                SolutionList: [
                    {
                        name: '电池缺酸',
                        value: 1
                    },
                    {
                        name: '电池烧坏',
                        value: 2
                    },
                    {
                        name: '夹子坏脱落',
                        value: 3
                    },
                    {
                        name: '夹子焊点老化脱落',
                        value: 4
                    },
                    {
                        name: '没有夹好脱落',
                        value: 5
                    },
                    {
                        name: '抽酸碰掉脱落',
                        value: 6
                    },
                    {
                        name: '主板坏没充电',
                        value: 7
                    },

                    {
                        name: '线路故障',
                        value: 8
                    },
                    {
                        name: '主板故障',
                        value: 9
                    },
                    {
                        name: '主板故障跟换',
                        value: 10
                    },
                    {
                        name: '网路异常没充电',
                        value: 11
                    },
                    {
                        name: '网络异常正常充电',
                        value: 12
                    },
                    {
                        name: '装配制造问题',
                        value: 13
                    },
                    {
                        name: '充电正常误报',
                        value: 14
                    },

                ],
                passwordshow: false,
                message: '',
                DeleteMonitorIDDe: '',
                DeleteIndex: '',
                name: api.pageParam.name,
                formData: {
                    JNo: '',
                    SJQty: '',
                    Status: '0',

                },
                tableData: [
                    {
                        Loop: '',
                        MonitorIDDe: 0,
                        Alarm: '',
                        FRemarks: ''
                    }
                ],

            },
            created: function () {
                var that = this;
                window.localStorage.setItem('pageName', JSON.stringify(that.name))

                var userInfo = JSON.parse(window.localStorage.getItem('userInfo'))
                if (userInfo && userInfo.UserName == '质检员') {
                    that.UserName = userInfo.UserName
                }
                if (api.pageParam.MonitorID) {
                    that.getDetail()
                }

            },
            mounted() {

                APP.setSafeTop()
                APP.keyBoardChange()
            },
            methods: {

                OnSolution(val) {
                    var that = this
                    that.tableData[that.SolutionIndex].FRemarks = val.name
                    that.SolutionShow = false
                },
                addSolution(item, index) {
                    var that = this
                    that.SolutionShow = true
                    that.SolutionIndex = index
                },
                deleteItem(item, index) {
                    var that = this
                    that.passwordshow = true
                    that.DeleteIndex = index
                    that.DeleteMonitorIDDe = item.MonitorIDDe
                },
                handlerDialog() {//确认or取消
                    var that = this
                    if (that.message == '') {
                        api.toast({
                            msg: '口令未输入'
                        })
                    }
                    else {
                        var list = {
                            password: that.message
                        }
                        APP.ajax('getPassword', list, function (res) {
                            if (res.ds[0].status == 200) {
                                api.toast({
                                    msg: '密码输入正确'
                                })
                                api.confirm({
                                    title: '提示',
                                    msg: '是否确认删除！',
                                    buttons: ['确定', '取消']
                                }, function (ret, err) {
                                    var index = ret.buttonIndex;
                                    if (ret.buttonIndex == 1) {
                                        APP.ajax('deleteAlarm', { MonitorIDDe: that.DeleteMonitorIDDe }, function (res) {
                                            console.log('190res', JSON.stringify(res))
                                            that.message = ''
                                            that.passwordshow = false
                                            that.tableData.splice(that.DeleteIndex, 1)
                                            api.toast({
                                                msg: '删除成功!'
                                            })
                                            // api.sendEvent({
                                            //     name: 'refreshAlarmList'
                                            // })
                                            // that.getDetail()
                                            // vm.$forceUpdate()
                                        })
                                    }
                                    else {
                                        api.toast({
                                            msg: '删除已取消!'
                                        })
                                        that.message = ''
                                        that.passwordshow = false

                                    }
                                });
                            }
                            else {
                                api.toast({
                                    msg: '密码输入错误!'
                                })
                                that.message = ''
                                that.passwordshow = false

                            }

                        })
                    }
                },


                confirm() {
                    var that = this
                    var obj
                    if (that.UserName == '质检员') {
                        obj = {
                            MonitorIDDe: that.tableData.map((item) => item.MonitorIDDe).join(','),
                            FRemarks: that.tableData.map((item) => item.FRemarks).join(','),
                            Status: that.formData.Status,
                        }
                    } else {
                        obj = {
                            MonitorIDDe: that.tableData.map((item) => item.MonitorIDDe).join(','),
                            FRemarks: that.tableData.map((item) => item.FRemarks).join(',')
                        }
                    }

                    console.log(JSON.stringify(obj))
                    APP.ajax('saveAlarm', obj, function (res) {
                        api.toast({
                            msg: '提交成功'
                        })
                        api.sendEvent({
                            name: 'refreshAlarmList'
                        })
                        api.closeWin()


                    })
                },
                getDetail() {
                    var that = this

                    APP.ajax('getAlarmDetail', { MonitorID: api.pageParam.MonitorID }, function (res) {
                        if (res.ds.length) {
                            res.ds.map((item) => {
                                item.GSStartDate = item.GSStartDate ? item.GSStartDate.replace('T', ' ') : ''
                                item.GSSEndDate = item.GSSEndDate ? item.GSSEndDate.replace('T', ' ') : ''
                                item.CSDate = item.CSDate ? item.CSDate.replace('T', ' ') : ''
                                item.KJDate = item.KJDate ? item.KJDate.replace('T', ' ') : ''
                            })
                            if (res.ds[0].Status == null) {
                                res.ds[0].Status = res.ds[0].Status == null ? '0' : res.ds[0].Status
                            } else {
                                res.ds[0].Status = res.ds[0].Status == 1 ? '1' : '0'
                            }
                            console.log(JSON.stringify(res.ds[0]))
                            that.formData = res.ds[0]
                            if (res.ds1.length) {
                                that.tableData = res.ds1
                                console.log(JSON.stringify(res.ds1))
                            }
                        }
                    })

                },
                onClickLeft() {
                    var that = this
                    api.sendEvent({
                        name: 'refreshAlarmList'
                    })
                    api.closeWin()

                },
            }
        })
    };
</script>

</html>